<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20211016通过id获取元素</title>
</head>
<div id="demo"></div>
<div id="demo1"></div>
<div id="demo2">
    <a href="http://www.baidu.com">百度</a>
    <!-- <img src="	https://mat1.gtimg.com/pingjs/ext2020/newom/build/static/images/new_logo.png" alt="">  -->
</div>
<div id="demo3"></div>
<div id=demo4></div>
<!-- onblur()失去焦点执行 -->

<input type="text" id="title" onblur="blur1()"><span id="errMsg"></span><br>
<!-- 点击提交执行submit（）函数 -->
<input type="button" value="提交" onclick="submit()"><br>
<!-- onchange()内容改变时执行 -->
友情链接
<select name="" id="link" onchange="jump()">
    <option value="http://www.baidu.com">百度</option>
    <option value="http://www.jd.com">京东</option>
    <option value="http://www.qq.com">腾讯</option>
</select>
<script>
    // .innerHtml添加内容
    // 添加的内容里面有html标签，css，js，则用innerHTML，
    document.getElementById("demo").innerHTML = "<h2>hello,plum</h2>";
    // innerText原样输出，不解析里面的html，css，js
    document.getElementById("demo1").innerText = "<h2>hello,plum</h2>";
    // innerHTML可以取值，也可以设置值（赋值）
    // innerText可以取值，也可以设置值（赋值） 去掉html标签,仅得到里面的内容
    console.log(document.getElementById("demo2").innerHTML); //<a href = "http://www.baidu.com" > 百度 <ul /a> 
    console.log(document.getElementById("demo2").innerText); //百度
    document.getElementById("demo3").innerHTML = '<img src="https://mat1.gtimg.com/pingjs/ext2020/newom/build/static/images/new_logo.png" alt="">';
    var news = [{
        id: 1,
        title: "新闻标题1"
    }, {
        id: 2,
        title: "新闻标题2"
    }, {
        id: 3,
        title: "新闻标题1"
    }];
    var html = "<ul>";

    news.forEach(element => {
        html += `<li>${element.title}</li>`;
    });
    html += "</ul>";
    document.getElementById("demo4").innerHTML = html;
    // 给input表单赋值
    document.getElementById("title").value = "新闻标题";
    // 获取表单提交的值
    function submit() {
        console.log("点击按钮后自动执行");
        var title = document.getElementById("title").value;
        if (title == "") {
            document.getElementById("errMsg").innerHTML = "请填写标题";
            // alert("请填写标题");
            // focus() 获得焦点
            document.getElementById("title").focus();
            return false;
        } else {
            document.getElementById("errMsg").innerHTML = "";
        }
        console.log(title);
    }

    function blur1() {
        console.log("失去焦点执行");
        var title = document.getElementById("title").value;
        if (title == "") {
            document.getElementById("errMsg").innerHTML = "请填写标题";
            document.getElementById("title").focus();
        } else {
            document.getElementById("errMsg").innerHTML = "";
        }
    }

    function jump() {
        var link = document.getElementById("link");
        var index = link.selectedIndex; //第几个  选中选项的下标
        // var url = link.options[index].value; //得到选中的value值
        var url2 = link.value; //获取选中的value值
        // var text = link.options[index].text; //得到选中的option之间的值
        console.log(index);
        // console.log(url);
        console.log(url2);
        // location.href = url2; //当前窗口打开
        window.open(url2); //新窗口打开
    }
</script>

<body>

</body>

</html>